<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-05-13 15:55:51
 * @Description: //下拉框
-->
<template>
	<div class="selectComponent" :style="{ width: width + 'px' }">
		<!-- 作业公司 -->
		<el-select
			v-if="selectType == 'company'"
			filterable
			:multiple="multiple"
			:collapse-tags="multiple"
			v-model="companyValue"
			placeholder="作业公司"
			size="mini"
			:clearable="clearable"
			@change="companyChange"
			@clear="companyClear"
			:value-key="valueKey"
			:disabled="disabled"
		>
			<el-option
				v-for="(item, index) in companyList"
				:key="index"
				:label="item.companyName"
				:value="valueKey ? item : item.companyCode"
			></el-option>
		</el-select>
		<!-- 操作过程 -->
		<el-select
			v-else-if="selectType == 'process'"
			filterable
			:multiple="multiple"
			:collapse-tags="multiple"
			v-model="processValue"
			placeholder="操作过程"
			size="mini"
			:clearable="true"
			@change="processChange"
			@clear="processClear"
			:disabled="disabled"
		>
			<el-option v-for="(item, index) in processList" :key="index" :label="item.oprocessName" :value="item.oprocessCode"></el-option>
		</el-select>
		<!-- 班次 -->
		<el-select
			v-else-if="selectType == 'workTime'"
			filterable
			:multiple="multiple"
			:collapse-tags="multiple"
			v-model="workTimeValue"
			placeholder="班次"
			size="mini"
			:clearable="clearable"
			@change="workTimeChange"
			@clear="workTimeClear"
			:disabled="disabled"
		>
			<el-option v-for="(item, index) in workTimeList" :key="index" :label="item.scheduleName" :value="item.scheduleType"></el-option>
		</el-select>
		<!-- 操作工艺 -->
		<el-select
			v-else-if="selectType == 'listoperation'"
			filterable
			:multiple="multiple"
			:collapse-tags="multiple"
			v-model="listoperationListValue"
			placeholder="操作工艺"
			size="mini"
			:clearable="clearable"
			@change="listoperationChange"
			@clear="listoperationClear"
			:value-key="valueKey"
			:disabled="disabled"
		>
			<el-option
				v-for="(item, index) in listoperationList"
				:key="index"
				:label="item.operationProcessName"
				:value="valueKey ? item : item.id"
			></el-option>
		</el-select>
		<!-- 作业类型 -->
		<el-select
			v-else-if="selectType == 'workType'"
			filterable
			:multiple="multiple"
			:collapse-tags="multiple"
			v-model="workTypeValue"
			placeholder="作业类型"
			size="mini"
			:clearable="clearable"
			@change="workTypeChange"
			@clear="workTypeClear"
			:value-key="valueKey"
			:disabled="disabled"
		>
			<el-option
				v-for="(item, index) in workTypeList"
				:key="index"
				:label="item.label"
				:value="valueKey ? item : item.value"
			></el-option>
		</el-select>
		<!-- 场地 -->
		<el-select
			v-else-if="selectType == 'filed'"
			filterable
			:multiple="multiple"
			:collapse-tags="multiple"
			v-model="filedValue"
			placeholder="场地"
			size="mini"
			:clearable="clearable"
			@change="filedChange"
			@clear="filedClear"
			:value-key="valueKey"
			:disabled="disabled"
		>
			<el-option
				v-for="(item, index) in filedList"
				:key="index"
				:label="item.storehouseName"
				:value="valueKey ? item : item.id"
			></el-option>
		</el-select>
		<!-- 字典表 -->
		<el-select
			v-else
			v-model="keyValue"
			:multiple="multiple"
			:collapse-tags="multiple"
			:placeholder="placeholder"
			size="mini"
			:clearable="true"
			@change="keyChange"
			@clear="keyClear"
			:disabled="disabled"
		>
			<el-option
				v-for="(item, index) in keyList[selectType]"
				:key="index"
				:label="item.dictLabel"
				:value="item.dictValue"
			></el-option>
		</el-select>
	</div>
</template>

<script>
export default {
	name: "ticketSelect",
	props: {
		// 宽度
		width: {
			type: Number | String,
			default: 153,
		},
		// 类型
		selectType: {
			type: String,
		},
		// 作业公司默认值
		companyValue: {
			type: String | Object,
		},
		// 修改作业公司
		companyOnChange: {
			type: Function,
		},
		// 操作过程默认值
		processValue: {
			type: String,
		},
		// 修改操作过程
		processOnChange: {
			type: Function,
		},
		// placeholder
		placeholder: {
			type: String,
		},
		// 字典表默认值
		keyValue: {
			type: String | Array,
		},
		// 修改字典表
		keyOnChange: {
			type: Function,
		},
		// 是否多选
		multiple: {
			type: Boolean,
			default: false,
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false,
		},
		// 作为 value 唯一标识的键名，绑定值为对象类型时必填 -作业公司
		valueKey: {
			type: String,
			default: "",
		},
		// 是否可以 清空 -作业公司
		clearable: {
			type: Boolean,
			default: true,
		},
		// 班次 默认值
		workTimeValue: {
			type: String,
		},
		// 修改班次
		workTimeOnChange: {
			type: Function,
		},
		// 公司下拉框是否展示跨公司作业
		isCrossFlag: {
			type: Boolean,
			default: false,
		},
		// 是否对公司数据 隐藏某些公司 数组
		isHiddenCompanyCode: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 操作工艺 默认值
		listoperationListValue: {
			type: String,
		},
		// 修改 操作工艺
		listoperationOnChange: {
			type: Function,
		},
		// 作业类型 默认值
		workTypeValue: {
			type: String,
		},
		// 修改 作业类型
		workTypeOnChange: {
			type: Function,
		},
		// 场地 默认值
		filedValue: {
			type: String | Object,
		},
		// 修改 场地
		filedOnChange: {
			type: Function,
		},
	},
	components: {},
	data() {
		return {
			companyList: this.$store.state.select.companyList, //作业公司
			processList: this.$store.state.select.processList, //作业过程
			keyList: this.$store.state.select.keyList, //字典表
			workTimeList: this.$store.state.select.workTimeList, // 班次
			listoperationList: this.$store.state.select.listoperationList, // 操作工艺
			workTypeList: [
				// `WORK_TYPE` varchar(32) DEFAULT NULL COMMENT '作业类型(101普通作业，201转场作业，301检尺作业)',
				{
					label: "普通作业",
					value: "101",
				},
				{
					label: "转场作业",
					value: "201",
				},
				{
					label: "检尺作业",
					value: "301",
				},
			],
			filedList: this.$store.state.select.filedList, // 场地
		}
	},
	created() {
		if (this.isCrossFlag) {
			this.companyList = [{ companyCode: "0", companyName: "否", id: "0" }, ...this.companyList]
		}

		if (this.isHiddenCompanyCode.length) {
			let companyList = []
			this.companyList.map(item => {
				// 如果传递的隐藏公司 code 数组里包含有则代表隐藏 所以取反
				if (!this.isHiddenCompanyCode.includes(item.companyCode)) {
					companyList.push(item)
				}
			})

			this.companyList = companyList
		}

		console.log(this.isHiddenCompanyCode)
	},
	mounted() {},
	computed: {},
	watch: {},
	methods: {
		/**
		 * @Author: zhangyongbing
		 * @description:修改 场地
		 * @param {*}
		 * @return {*}
		 */
		filedChange(value) {
			let filedName = ""
			if (value && !this.valueKey) {
				filedName = this.filedList.filter(item => item.id == value)[0].storehouseName
			}
			this.filedOnChange(value, filedName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空 场地
		 * @param {*}
		 * @return {*}
		 */
		filedClear() {
			this.filedChange("", "")
		},
		/**
		 * @Author: zhangyongbing
		 * @description:修改作业类型
		 * @param {*}
		 * @return {*}
		 */
		workTypeChange(value) {
			let workTypeName = ""
			if (value && !this.valueKey) {
				workTypeName = this.workTypeList.filter(item => item.value == value)[0].label
			}
			this.workTypeOnChange(value, workTypeName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空作业类型
		 * @param {*}
		 * @return {*}
		 */
		workTypeClear() {
			this.workTypeChange("", "")
		},
		/**
		 * @Author: zhangyongbing
		 * @description:修改操作工艺
		 * @param {*}
		 * @return {*}
		 */
		listoperationChange(value) {
			let operationProcessName = ""
			if (!this.valueKey) {
				operationProcessName = this.listoperationList.filter(item => item.id == value)[0].operationProcessName
			}
			this.listoperationOnChange(value, operationProcessName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空操作工艺
		 * @param {*}
		 * @return {*}
		 */
		listoperationClear() {
			this.listoperationChange("", "")
		},
		/**
		 * @Author: zhangyongbing
		 * @description:修改班次
		 * @param {*}
		 * @return {*}
		 */
		workTimeChange(value) {
			let scheduleName = this.workTimeList.filter(item => item.scheduleType == value)[0].scheduleName
			this.workTimeOnChange(value, scheduleName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空班次
		 * @param {*}
		 * @return {*}
		 */
		workTimeClear() {
			this.workTimeOnChange("", "")
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改作业公司
		 * @param {*}
		 * @return {*}
		 */
		companyChange(value) {
			let companyName = ""
			if (!this.valueKey) {
				companyName = this.companyList.filter(item => item.companyCode == value)[0].companyName
			}
			this.companyOnChange(value, companyName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空作业公司
		 * @param {*}
		 * @return {*}
		 */
		companyClear() {
			this.companyOnChange("", "")
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改操作过程
		 * @param {*}
		 * @return {*}
		 */
		processChange(value) {
			let oprocessName = this.processList.filter(item => item.oprocessCode == value)[0].oprocessName
			this.processOnChange(value, oprocessName)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空操作过程
		 * @param {*}
		 * @return {*}
		 */
		processClear() {
			this.processOnChange("", "")
		},
		/**
		 * @Author: gonghairun
		 * @description: 修改字典表
		 * @param {*}
		 * @return {*}
		 */
		keyChange(value) {
			let dictLabel = !this.multiple ? this.keyList[this.selectType].filter(item => item.dictValue == value)[0].dictLabel : ""
			this.keyOnChange(value, dictLabel)
		},
		/**
		 * @Author: gonghairun
		 * @description: 清空字典表
		 * @param {*}
		 * @return {*}
		 */
		keyClear() {
			this.keyOnChange("", "")
		},
	},
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
